<template>
    <div :ref="$options.name" class="chartInstance" />
</template>
<script>
    import chartmixins from '../../util/echartmixins'
    import {
        colorOptions
    } from '../../util/common.js'
    import {
        rankingData
    } from '../../util/bar-mock-data'


    /**
     * 
     *  排名图，展示前五的那种
     * 
     *  数据格式参考  ./bar-mock-data.js 中提供的格式
     * 
     *  该charts 只支持单个数据哦
     * 
     */


    export default {
        name: 'Bar-ranking',
        components: {},
        mixins: [chartmixins],
        props: {
            chartData: {
                type: Array,
                default: () => []
            },

            labelKey: {
                type: [Array, String],
                default: ''
            },

            valueKey: {
                type: [Array, String],
                default: ''
            },

            chartStyle: {
                type: Object,
                default: () => {
                    return {
                        'labelColor': 'rgba(255,255,255,0.6)',
                    }
                }
            }
        },
        data() {
            return {
                defaultOptions: {
                    grid: {
                        left: "10%",
                        top: "8%",
                        right: "8%",
                        bottom: "0%",
                        containLabel: true,
                    },
                    xAxis: {
                        show: false,
                    },
                    yAxis: {
                        axisTick: "none",
                        axisLine: "none",
                        offset: this.formatFontSize(27),
                        axisLabel: {
                            textStyle: {
                                color: this.chartStyle.labelColor,
                                fontSize: this.formatFontSize(14)
                            },
                        },
                        data: [],
                    },
                    series: [
                        {
                            name: "条",
                            type: "bar",
                            data: [],
                            label: {
                                normal: {
                                    show: true,
                                    position: "right",
                                    textStyle: {
                                        color: this.chartStyle.labelColor,
                                        fontSize: this.formatFontSize(14),
                                    },
                                },
                            },
                            barWidth: this.formatFontSize(10),
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        var num = colorOptions.nromal.length;
                                        return colorOptions.nromal[params.dataIndex % num];
                                    },
                                },
                            }
                        },
                        {
                            name: "外圆",
                            type: "scatter",
                            hoverAnimation: false,
                            data: [],
                            symbolSize: this.formatFontSize(25),
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        var num = colorOptions.nromal.length;
                                        return colorOptions.nromal[params.dataIndex % num];
                                    },
                                    opacity: 1,
                                },
                            }
                        },
                    ],
                }
            }
        },
        watch: {
            chartData(newVal) {
                this.refreshApiData(newVal)
            }
        },
        computed: {
            formatOptions() {
                return Object.assign({
                    'labelColor': 'rgba(255,255,255,0.6)',
                }, this.chartStyle)
            },
        },
        methods: {
            refreshMockData() {
                this.refreshApiData(rankingData)
            },

            refreshApiData({
                chartData,
                valueKey,
                labelKey
            } = this) {
                // 这里有数据代表不是直接传递，需要手动取值
                if (chartData?.length) {
                    if (Array.isArray(this.labelKey) || Array.isArray(this.valueKey)) {
                        this.errorMsg = '数据格式传递错误'
                        return
                    }
                    let chartLabelList = chartData.map(item => item[labelKey])
                    let seriesList = chartData.map(item => item[valueKey])
                    this.defaultOptions.yAxis.data = chartLabelList.reverse()
                    this.defaultOptions.series[0].data = seriesList.reverse()
                    this.defaultOptions.series[1].data = seriesList.map(() => 0)
                } else {
                    if (Array.isArray(labelKey) && Array.isArray(valueKey)) {
                        this.defaultOptions.yAxis.data = [...labelKey].reverse()
                        this.defaultOptions.series[0].data = [...valueKey].reverse()
                        this.defaultOptions.series[1].data = valueKey.map(() => 0)
                    } else {
                        this.errorMsg = '数据格式传递错误'
                    }
                }
                this.setOption(this.defaultOptions)
            }
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {
            this.refreshMockData()
        },
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped horizontalvw>
    .chartInstance {
        width: 100%;
        height: 100%;
    }
</style>